import React, { memo, useEffect, useRef, useState } from "react";
import type { FC, ReactNode } from "react";
import { PhonePageWrapper } from "./style";
import { BellOutlined, MobileOutlined } from "@ant-design/icons";
import { CaptchaSentAPI, CaptchaVerifyAPI, LoginRefreshAPI, LoginStatusAPI, userAccountAPI } from "../../api";
import { message } from "antd";
import { useAppDispatch } from "@/store";
import { feachLoginQrAction } from "@/store/modules/login";
import { useNavigate } from "react-router-dom";

interface IProps {
  children?: ReactNode;
}

const PhonePage: FC<IProps> = () => {
  const phoneRef = useRef<HTMLInputElement>(null)
  const areCodeRef = useRef<HTMLInputElement>(null)
  // 控制我们 验证码发送
  const [isCode, setIsCode] = useState(false)
  // 验证码的内容设置
  const [areaCodeText, setAreaCodeText] = useState("发送验证码")
  let count = 30

  const [messageApi] = message.useMessage();
  // 发送验证码
  const handleAuthClick = async () => {
    if (String(phoneRef.current!.value).length >= 11) {
      const { data } = await CaptchaSentAPI(Number(phoneRef.current?.value))
      if (data) {
        setIsCode(true)
        messageApi.open({
          type: 'success',
          content: '验证码发送成功~',
        });
        const trime = setInterval(() => {
          if (count <= 0) {
            clearInterval(trime)
            setIsCode(false)
            count = 30
          }
          setAreaCodeText(`${count - 1}秒后重新发送`)
        }, 1000)
      } else {
        messageApi.open({
          type: 'error',
          content: '手机号输入错误, 或该账号未注册, 请重新输入',
        });
      }
    }
  }
  const dispatch = useAppDispatch()
  const naviagate = useNavigate()
  // 验证验证码
  const handleLoginCLick = async () => {
    // if (isCode) {
    try {
      await CaptchaVerifyAPI(Number(phoneRef.current?.value), Number(areCodeRef.current?.value))
      dispatch(feachLoginQrAction("phoneType"))
      naviagate("/musiclibrary")
    } catch (error) {
      messageApi.open({
        type: 'error',
        content: '验证码错误',
      });
    }
  }
  // 区号的修改
  const handleAreaCode = async () => {
    // 默认即可
    // dispatch(feachLoginQrAction("loginQr"))
    // const res = await LoginRefreshAPI()
    // await LoginStatusAPI()
    const res = await userAccountAPI()
    console.log(res)
  }
  return <PhonePageWrapper>
    <div className="phone-ipt-box">
      <MobileOutlined style={{ fontSize: "24px", color: "#7f7e7e" }} />
      <input type="text" className="inpt area-code" value="+86" onChange={handleAreaCode} />
      <input type="text" className="inpt phone-code" placeholder="手机号" ref={phoneRef} />
    </div>
    <div className="phone-ipt-box">
      <BellOutlined style={{ fontSize: "24px", color: "#7f7e7e" }} />
      <input type="text" className="inpt pwd" placeholder="验证码" ref={areCodeRef} />
      <button className="auth-code" onClick={handleAuthClick} disabled={isCode}>{areaCodeText}</button>
    </div>
    <button className="login-btn" onClick={handleLoginCLick} >登录</button>
  </PhonePageWrapper>;
};

export default memo(PhonePage);